<template>
	<view class="wrapper">
    <view class="account">
      <view class="can">
        <text class="text">剩余:</text>
        <text class="num">{{ account.ticket * 1 }}</text>
      </view>
      <view class="wait">
        <text class="text">待返:</text>
        <text class="num">{{ account.await_ticket * 1 }}</text>
      </view>
      <view class="wait">
        <text class="text">可领:</text>
        <text class="num">{{ account.done_ticket * 1 }}</text>
      </view>
      <view class="view">
        <u-button color="#fff" :custom-style="{ 'color': '#666', 'width': '180rpx' }" size="small" text="查看待返" @click="goWait"></u-button>
      </view>
    </view>
    <!--<view class="save" v-if="ticket.ticket && ticket.ticket > 0">-->
    <!--  <view class="title">您有新红包, 点击领取</view>-->
    <!--  <view class="btn">-->
    <!--    <u-button :text="myTicket" type="primary" @click="saveTicket"></u-button>-->
    <!--  </view>-->
    <!--</view>-->
    <view class="sticky">
      <u-tabs
          class="tab"
          :current="current"
          @change="changeTag"
          :list="tabs"
          :lineColor="activeColor"
          lineHeight="5"
          lineWidth="50"
          :activeStyle="{
            color: activeColor,
            fontWeight: 'bold',
            transform: 'scale(1.05)',
            fontSize: '26rpx'
          }"
          :inactiveStyle="{
            color: '#333333',
            transform: 'scale(1)',
            fontSize: '24rpx'
          }"
          :itemStyle="{
            height: '50px',
          }"
      />
    </view>
    <view class="list">
      <commission :list="list" v-if="currentType === 'commission'" />
      <consume :list="list" v-if="currentType === 'consume'" />
      <!--<transfer :list="list" v-if="currentType === 'transfer'" />-->
      <refill :list="list" v-if="currentType === 'refill'" />
      <!--<log :list="list" v-if="currentType === 'log'" />-->
    </view>
    <arrow />
    <u-back-top bottom="80" right="40" :scroll-top="scrollTop" icon="arrow-up" :customStyle="{'opacity': '0.99'}"></u-back-top>

  </view>
</template>

<script>
import color from '@/config/color.js'
import Arrow from '../../components/arrow'
import Commission from './components/Commission'
import Consume from './components/Consume'
import Transfer from './components/Transfer'
import Refill from './components/Refill'
import Log from './components/Log'
import base64 from '../../util/base64'
import Balance from '../../api/balance'
const balanceModel = new Balance()

	export default {
    components: {
      Arrow,
      Commission,
      Consume,
      Transfer,
      Refill,
      Log
    },
    onPageScroll(e) {
      this.scrollTop = e.scrollTop;
    },
    computed: {
      currentType() {
        return this.tabs[this.current].type
      },
      myTicket() {
        return `￥${this.ticket.ticket},点击领取`
      }
    },
		data() {
			return {
        activeColor: color.main_color,
        scrollTop: 0,
			  tabs: [
          { name: '返佣', type: 'commission' },
          // { name: '消费', type: 'consume' },
          { name: '领取', type: 'consume' },
          // { name: '互转', type: 'transfer' },
          { name: '充值', type: 'refill' },
          // { name: '明细', type: 'log' },
        ],
        current: 0,
        account: {},
        list: [],
        queryList: {
          page: 0,
          pageSize: 10,
          busy: false,
        },
        ticket: {}
			}
		},
    // 刷新
    onPullDownRefresh() {
      this.current = 0
      this.getAccount()
      this.init()
    },
    // 加载更多
    onReachBottom() {
      this.getList(true)
    },
		onLoad(options) {
      this.current = +options.type || 0
      this.getAccount()
      this.init()
		},
		methods: {
      saveTicket() {
        balanceModel.saveTicket({ id: this.ticket.id }).then(() => {
          uni.showToast({
            icon: 'none',
            title: '领取成功'
          })
          this.ticket.ticket = 0
        })
      },
      init() {
        this.queryList = {
          page: 0,
          pageSize: 10,
          busy: false,
        }
        this.list = []
        this.getList()
      },
      getList(append = false) {
        switch (this.currentType) {
          case 'commission':
            this.getCommission(append)
            break
          case 'consume':
            this.getConsume(append)
            break
          case 'refill':
            this.getRefill(append)
            break
          case 'transfer':
            this.getTransfer(append)
            break
          case 'log':
            this.getLog(append)
            break
        }
      },
		  changeTag(tab) {
        // console.log(tab)
        this.current = tab.index
        this.init()
      },
      // 查看待返
      goWait() {
        uni.navigateTo({
          url: '/sub_service/commission/index?type=2'
        })
      },
      // 获取帐户
      getAccount() {
		    balanceModel.myAccount().then(response => {
          let { data } = response
          data = base64.parse(data)
          this.account = data.account
          // console.log(data)
          uni.stopPullDownRefresh();
        })
        // balanceModel.getTicket().then(response => {
        //   let { data } = response
        //   data = base64.parse(data)
        //   this.ticket = data
        // })
      },
      // 佣金
      getCommission(append = false) {
        if (this.queryList.busy === false) {
          this.queryList.page++
          this.queryList.busy = true
          balanceModel.myCommission({
            ...this.queryList,
            ticket: 1
          }).then(response => {
            let { data } = response
            data = base64.parse(data)
            if (data.list.length === 0) {
              this.queryList.busy = true
            } else {
              this.queryList.busy = false
              if (append) {
                this.list = this.list.concat(data.list)
              } else {
                this.list = data.list
              }
            }
            // console.log(this.list)
          })
        }
      },
      // 消费
      getConsume(append = false) {
        if (this.queryList.busy === false) {
          this.queryList.page++
          this.queryList.busy = true
          balanceModel.myConsume({
            ...this.queryList,
            ticket: 1
          }).then(response => {
            let { data } = response
            data = base64.parse(data)
            if (data.list.length === 0) {
              this.queryList.busy = true
            } else {
              this.queryList.busy = false
              if (append) {
                this.list = this.list.concat(data.list)
              } else {
                this.list = data.list
              }
            }
            // console.log(this.list)
          })
        }
      },
      // 互转
      // getTransfer(append = false) {
      //   if (this.queryList.busy === false) {
      //     this.queryList.page++
      //     this.queryList.busy = true
      //     balanceModel.myTransfer({
      //       ...this.queryList
      //     }).then(response => {
      //       let { data } = response
      //       data = base64.parse(data)
      //       if (data.list.length === 0) {
      //         this.queryList.busy = true
      //       } else {
      //         this.queryList.busy = false
      //         if (append) {
      //           this.list = this.list.concat(data.list)
      //         } else {
      //           this.list = data.list
      //         }
      //       }
      //       // console.log(this.list)
      //     })
      //   }
      // },
      // 充值
      getRefill(append = false) {
        if (this.queryList.busy === false) {
          this.queryList.page++
          this.queryList.busy = true
          balanceModel.myRefill({
            ...this.queryList
          }).then(response => {
            let { data } = response
            data = base64.parse(data)
            if (data.list.length === 0) {
              this.queryList.busy = true
            } else {
              this.queryList.busy = false
              if (append) {
                this.list = this.list.concat(data.list)
              } else {
                this.list = data.list
              }
            }
            // console.log(this.list)
          })
        }
      },
      // 明细
      // getLog(append = false) {
      //   if (this.queryList.busy === false) {
      //     this.queryList.page++
      //     this.queryList.busy = true
      //     balanceModel.myLog({
      //       ...this.queryList
      //     }).then(response => {
      //       let { data } = response
      //       data = base64.parse(data)
      //       if (data.list.length === 0) {
      //         this.queryList.busy = true
      //       } else {
      //         this.queryList.busy = false
      //         if (append) {
      //           this.list = this.list.concat(data.list)
      //         } else {
      //           this.list = data.list
      //         }
      //       }
      //       // console.log(this.list)
      //     })
      //   }
      // },
		}
	}
</script>

<style lang="scss" scoped>

// tabs
::v-deep {
  .u-tabs__wrapper__nav {
    justify-content: center;
  }
  .u-tabs__wrapper__nav__line {
    // 这个线在各端中都不一样
    //left: 50rpx;
    //bottom: 20rpx;
    display: none;
  }
  .u-tabs__wrapper__nav__item {
    width: 80rpx;
  }
}

// 吸顶
.sticky {
  position: sticky;
  top: 0;
  background: white;
  z-index: 999999;
}

.save {
  margin: 20rpx;
  padding: 20rpx;
  background: white;
  border-radius: 10rpx;
  .title {
    height: 30px;
    color: red;
  }
  .btn {
    padding: 10rpx 150rpx;
  }
}

.wrapper {
  background: $background_color;
  font-size: 24rpx;
  .account {
    height: 70px;
    background: $main_color;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    view {
      height: 20px;
      display: flex;
      color: white;
      .text {
        padding-right: 10rpx;
        width: 200rpx;
        text-align: right;
      }
      .num {
        font-weight: 700;
        flex: 1;
      }
    }
    .view {
      width: 400rpx;
      position: absolute;
      right: 10px;
      display: flex;
      justify-content: space-between;
    }
  }
  .tab {
    height: 50px;
    background: white;
    margin: 0 10px;
    //display: flex;
    //justify-content: center;
    //align-items: center;
    //top: 0;
    border-bottom: 1rpx solid $background_color;
  }
  .list {
    margin: 20rpx;
    padding-bottom: 20px;
    //background: red;
    .item {
      // 小程序中无效
      //background: white;
      //padding: 20rpx;
      //border-radius: 10rpx;
      //margin-bottom: 10rpx;
    }
  }
}
</style>
